<template>
  <div class="y-h-full y-relative">
    <router-view class="y-absolute y-inset-0 y-z-50 y-bg-white" @refresh="onRefresh">
    </router-view>
    <yyFormTablePagination ref="yyFormTablePaginationRef" :tableConfig="tableConfig" :formConfig="formConfig"></yyFormTablePagination>
  </div>
</template>

<script>
import { stateOptions } from "@/constant/defaultOptions.js";
import yyFormTablePagination from "@/components/yyFormTablePagination/index.vue";
import { createLoading, createMessage } from '@/utils';
export default {
  components: { yyFormTablePagination },
  name: "system_role",
  data() {
    return {
      tableConfig: {
        tableColumn: [
          { prop: "name", label: "名称", minWidth: 88, },
          { prop: "userNum", label: "关联用户数", minWidth: 88, },
          { prop: "state", label: "状态", tag: true, tagOptions: stateOptions },
        ],
        tableManagerColumn: [
          {
            prop: "roleRelationMenu",
            label: "关联菜单",
            type: "primary",
            size: "small",
            width: 88,
            onClick: (_, row) => {
              this.$router.push(`/system/role/roleRelationMenu?id=${row.id}`);
            },
          },
          {
            prop: "roleRelationUser",
            label: "关联用户",
            type: "primary",
            size: "small",
            width: 88,
            onClick: (_, row) => {
              this.$router.push(`/system/role/roleRelationUser?id=${row.id}`);
            },
          },
          {
            prop: "edit",
            label: "编辑",
            type: "primary",
            size: "small",
            onClick: (_, row) => {
              this.$router.push(`/system/role/edit?id=${row.id}`);
            },
          },
          {
            prop: "del",
            label: "删除",
            type: "danger",
            size: "small",
            hidden: (_, row) => {
              return row.hiddenDelete;
            },
            onClick: (_, row) => {
              this.$confirm(`确定删除${row.name}吗？`, "提示").then(async () => {
                const loading = createLoading(`正在执行中，请稍等`);
                try {
                  await this.$globalApi.role.sysRoleDeleteByIdApi({ids: row.id});
                  createMessage("删除成功", {type: "success"});
                  this.onRefresh();
                } catch (err) {
                  console.log("删除报错了", err)
                } finally {
                  loading.close();
                }
              }).catch(() => {})
            },
          },
        ],
        tableApi: this.$globalApi.role.sysRoleListApi,
      },
      formConfig: {
        formColumn: [
          { component: "yyInput", prop: "name", label: "名称" },
          {
            component: "yySelect",
            prop: "state",
            label: "状态",
            options: stateOptions,
          },
        ],
        formManagerColumn: [
          {
            prop: "edit",
            label: "新增",
            type: "primary",
            size: "small",
            onClick: () => {
              this.$router.push(`/system/role/add`);
            },
          },
          {
            prop: "del",
            label: "批量删除",
            type: "danger",
            size: "small",
            onClick: () => {
              const keys = this.$refs?.yyFormTablePaginationRef?.getCheckKeys();
              if (!keys?.length) {
                return createMessage("请选择批量删除的数据")
              }
              this.$confirm(`确定批量删除选中的数据项吗？`, "提示").then(async () => {
                const loading = createLoading(`正在执行中，请稍等`);
                try {
                  await this.$globalApi.role.sysRoleDeleteByIdApi({ids: keys});
                  createMessage("批量删除成功", {type: "success"});
                  this.onRefresh();
                } catch (err) {
                  console.log("批量删除报错了", err)
                } finally {
                  loading.close();
                }
              }).catch(() => {})
            },
          },
        ],
      },
    };
  },
  methods: {
    onRefresh() {
      this.$refs.yyFormTablePaginationRef.search();
    },
  },
  mounted() {
  },
};
</script>

<style></style>